<template>
  <div class="dxaa">
    <Row class="dfdxf">
      <Col style="text-align: right" span="24">
        <Button type="primary" size="small" :loading="switches.saveNewUsersLoading" @click="saveNewUsersForRole">保存修改
        </Button>
        <Poptip trigger="click" title="选择用户到角色" content="content" placement="bottom-end" width="600"
                @on-popper-show="loadRoleOutUsers" :transfer="true" @on-popper-hide="makePageDefault">
          <Button type="primary" size="small">添加用户</Button>
          <div slot="content">
            <Row class="oll">
              <Col span="8">
                <Input v-model="pageable2.searchParam" placeholder="姓名" suffix="ios-search"
                       @on-enter="doQuery">
                </Input>
              </Col>
            </Row>
            <Table @on-selection-change="tableSelection" height="520" :columns="roleOutUserColumns"
                   :data="roleOutDatas" no-data-text="无可选择的用户" :loading="switches.roleUserPupus"></Table>
            <Row class="xxq">
              <Col span="18">
                <Page :total="total" show-total :page-size="pageable2.size" @on-change="pageChange" class="pagee"
                      size="small"/>
              </Col>
              <Col span="6">
                <Button type="primary" size="small" long @click="addUsersToPool">确定选择</Button>
              </Col>
            </Row>
          </div>
        </Poptip>
      </Col>
    </Row>
    <Table :columns="columns" :data="datas" :loading="switches.tableLoading" size="small" stripe
           no-data-text="无关联用户"></Table>
  </div>
</template>

<script>
  export default {
    name: 'RoleUsers',
    props: {
      id: {
        type: Number,
        default () {
          return null
        }
      }
    },
    mounted: function () {
      this.switches.tableLoading = true
      setTimeout(() => {
        this.loadRoleUsers()
      }, 600)
    },
    data () {
      return {
        switches: {
          tableLoading: false,
          roleUserPupus: false,
          saveNewUsersLoading: false
        },
        datas: [],
        total: 0,
        roleOutDatas: [],
        convertSaveUsers: [],
        pageable: {
          page: 0,
          size: 9999,
          roldId: this.id,
          searchParam: ''
        },
        pageable2: {
          page: 0,
          size: 15,
          roldId: this.id,
          searchParam: ''
        },
        columns: [
          {
            title: '姓名',
            align: 'center',
            key: 'name'
          },
          {
            title: '登录名',
            align: 'center',
            key: 'username'
          },
          {
            title: '账号状态',
            align: 'center',
            key: 'gender',
            render: (h, params) => {
              let value = params.row.enabled
              if (value) {
                return h('p', {style: {color: 'green'}}, '启用')
              }
              return h('p', {style: {color: 'red'}}, '禁用')
            }
          },
          {
            title: '部门',
            align: 'center',
            key: 'orgName'
          },
          {
            title: '岗位',
            align: 'center',
            key: 'postName'
          },
          {
            title: '性别',
            align: 'center',
            key: 'gender',
            render: (h, params) => {
              let value = params.row.gender
              if (value === 0) {
                return h('p', {}, '女')
              } else if (value === 1) {
                return h('p', {}, '男')
              }
            }
          },
          {
            title: '年龄',
            align: 'center',
            key: 'age'
          },
          {
            title: '邮箱',
            align: 'center',
            key: 'email'
          },
          {
            title: '电话',
            align: 'center',
            key: 'mobile'
          },
        {
            title: '操作',
            key: 'action',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.datas.splice(params.row._index, 1)
                    }
                  }
                }, '移除')
              ])
            }
          }

        ],
        roleOutUserColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: 'ID',
            align: 'center',
            key: 'id'
          },
          {
            title: '姓名',
            align: 'center',
            key: 'name'
          },
          {
            title: '登录名',
            align: 'center',
            key: 'username'
          },
          {
            title: '电话',
            align: 'center',
            key: 'mobile'
          }
        ]
      }
    },
    watch: {
      id (newOne, oldOne) {
        // 请求数据
        this.pageable.roldId = newOne
        this.pageable2.roldId = newOne
        this.loadRoleUsers()
      }
  },
    methods: {
      loadRoleUsers () {
        // 加载数据咯...
        if (!this.pageable.roldId) {
          return
        }
        this.switches.tableLoading = true
        window.myapi.do_gett('$user/roleUsers', this.pageable).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.datas = resp.data.data.content
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).finally(() => {
          this.switches.tableLoading = false
        })
      },
      loadRoleOutUsers () {
        // 加载数据咯...
        if (!this.pageable.roldId) {
          return
        }
        this.switches.roleUserPupus = true
        window.myapi.do_post('$user/roleOutUsers', this.pageable2).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.roleOutDatas = resp.data.data.content
            this.total = resp.data.data.totalElements
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).finally(() => {
          this.switches.roleUserPupus = false
        })
      },
      tableSelection (selection, row) {
        console.log('dsfasdfasdfasdfasdf', selection)
        this.convertSaveUsers = selection
      },
      addUsersToPool () {
        // 添加到已选择池中
        this.datas.push(...(this.convertSaveUsers.filter(item => {
          let flag = true
          for (let i = 0; i < this.datas.length; i++) {
            let cu = this.datas[i]
            if (cu.id === item.id) {
              flag = false
              break
            }
          }
          return flag
        })))
        this.spiceSelectUserPoolDatas()
      },
      spiceSelectUserPoolDatas () {
        // 删除选择表格的内容
        this.convertSaveUsers.forEach(item => {
          this.roleOutDatas.forEach((son, index) => {
            if (item.id === son.id) {
              this.roleOutDatas.splice(index, 1)
            }
          })
        })
      },
      saveNewUsersForRole () {
        let userIDs = this.datas.map(item => item.id)
        this.switches.saveNewUsersLoading = true
        window.myapi.post_json('$role/updateUsers/' + this.id, userIDs).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
              this.$Notice.success({
                title: '提示',
                desc: '操作成功！'
              })
            this.loadRoleUsers()
          } else {
            this.$Notice.success({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch((error) => {}).finally(() => {
          this.switches.saveNewUsersLoading = false
        })
      },
      doQuery () {
        this.pageable2.page = 0
        this.loadRoleOutUsers()
      },
      makePageDefault () {
        this.pageable2.page = 0
        this.pageable2.searchParam = ''
        this.convertSaveUsers = []
      },
      pageChange: function (index) {
        this.pageable2.page = index - 1
        this.loadRoleOutUsers()
      }
    }
  }
</script>

<style scoped>
  .dxaa{
    margin-top: -10px;
  }
  .dfdxf{
    margin-bottom: 5px;
  }

  .xxq {
    margin-top: 20px;
  }
  .oll{
    margin-bottom: 5px;
  }
</style>
